<template>
    <div class="serviceProjects" id="serviceList">
        <div id="serviceList2" style="position: relative;">
            <el-image 
                class="my-image"
                style="width:100%; height: 100%;"
                fit="contain"
                :src="url1" 
                :preview-src-list="srcList1"
            >
            </el-image>
        </div>
        
		<!-- <div style="position: fixed;top: 50px;left: 50px;font-size: 60px;cursor: pointer;" class="iconfont icon-fanhui" @click="back"></div> -->
    </div>
</template>
<script>
    export default{
        data(){
            return {
                // url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                url1: '',
                srcList1: [
                    // 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    // 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ],
                interval3: '',
            }
        },
        created() {
            this.url1 = require('@/assets/notice/notice-11.png')
            this.srcList1 = [require('@/assets/notice/notice-11.png')]
        },
        mounted() {
            this.scrollView2()
        },
        methods: {
            back(){
                this.$router.push('/')
            },
            scrollView2() {
                this.$nextTick(()=>{
                    let serviceList = document.getElementById('serviceList')	
                    let serviceList2 = document.getElementById('serviceList2')	
                    let startL = -serviceList.offsetHeight
                    this.interval3 = setInterval(() => {
                        startL+=1
                        console.log(serviceList2.scrollHeight)
                        if (startL >= (serviceList2.scrollHeight)) {
                            startL = -serviceList.offsetHeight
                        }
                        serviceList2.style.top = -startL + 'px'//上移高度
                    }, 100)
                })
            },
        },
        beforeDestroy() {
            clearInterval(this.interval3)
        },
    }
</script>
<style lang="scss" scoped>
    .serviceProjects {
        margin: 0 auto;
        overflow: hidden; 
        display: flex; 
        flex-direction: column;
        // background: url(@/assets/notice/notice-10.png);
        // background-size: 100% 100%;
        width: 80vh;
        height: 100vh;
        box-sizing: border-box;
        padding: 16vh 6vh 10vh 6vh;
    }
    .serviceProjects::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(@/assets/notice/notice-10.png);
        background-size: 100% 100%;
        background-position: 150% 100%;
        width: 80vh;
        height: 100vh;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 16vh 6vh 10vh 6vh;
    }
    ::v-deep .my-image .el-image__inner {
        height: auto;
    }
</style>